<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-03 变换帧测</title>
</head>
<body>
  <h1>变换帧测</h1>
  <h2>Vue 两大核心? 数据驱动、组件化</h2>

  数据驱动: Object.defineProperty

  <script>
    let obj = {}
    let val = 20
    Object.defineProperty(obj, 'age', {
      get() {
        console.log(`age 属性被读取了 ${val}`)
        return val
      },
      set(newValue) {
        console.log('age 属性被修改了', val, ' newValue=', newValue)
        val = newValue
      }
    })

    // set
    obj.age = 18
    // get
    console.log('结果', obj.age)

    obj.name = '小明'
  </script>
</body>
</html>